<template>
  <div>
    <breadcrumb></breadcrumb>
    <!-- 列表 -->
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          <div class="inputItem">
            <div class="title">电话</div>
            <div class="inputBox">
              <el-input
                v-model="phone"
                clearable
              >
              </el-input>
            </div>
          </div>
		  <div class="inputItem">
            <div class="title">姓名</div>
            <div class="inputBox">
              <el-input
                v-model="driverName"
				type="number"
				maxlength="11"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">状态</div>
            <div class="inputBox">
              <el-select v-model="status" placeholder="请选择"
                ><el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option
              ></el-select>
            </div>
          </div>
          <div class="inputItem">
            <div class="title">编辑时间</div>
            <el-date-picker
              size="small"
              v-model="createTime"
              type="datetimerange"
              :picker-options="createTime"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
          <!-- 查询 -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="init(1)"
            >查询</el-button
          >
          <el-button
            type="plain"
            size="small"
            icon="el-icon-refresh-right"
            @click="CleanUp"
            >清空</el-button
          >
        </div>
      </div>
      <div class="main_head"></div>
      <div class="list">
        <el-table :data="resultDate" style="width: 100%">
          <el-table-column prop="driverName" label="司机"></el-table-column>
          <el-table-column prop="phone" label="联系方式"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1" style="color: red">已处理</div>
              <div v-else>未处理</div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" width="153">
            <template slot-scope="scope">
              <div>
                <!-- <el-button type="text" size="small" @click="showAlterDialog(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="showUpPwd(scope.row)">修改密码</el-button>-->
                <el-button
                  type="text"
                  size="small"
                  @click="resetPswd(scope.row)"
                  v-if="scope.row.status != 1"
                  >处理</el-button
                >
                <el-button type="text" size="small" @click="delBtn(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination
          @current-change="changePages($event)"
          class="pagination"
          background
          layout="slot,prev, pager, next"
          :current-page.sync="pageCurrent"
          :total="data.total * 1"
          :page-size="data.size * 1"
          :pager-count="5"
        >
          <template slot>
            <span
              style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              "
            >
              共{{ data.total }}条,每页{{ data.size }}条
            </span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";

export default {
  data() {
    return {
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "处理",
        },
        {
          value: "1",
          label: "未处理",
        },
      ],
      status: "",
      beginTime: "",
      endTime: "",
      driverName: "",
      phone: "",
      createTime: '',
      resultDate: [],
      pageCurrent: 0,
      data: {
        total: 0,
        size: 10,
      },
    };
  },
  methods: {
    CleanUp() {
      this.status = "";
      this.beginTime = "";
      this.endTime = "";
      this.driverName = "";
      this.phone = "";
	  this.createTime=''
	  this.init(this.pageCurrent);
    },
    changePages(val) {
      //页码变化时
      this.pageCurrent = val;
      this.init(val);
    },
    init(val) {
		if(this.createTime){
			this.beginTime=this.createTime[0]
			this.endTime=this.endTime[0]
		}
      this.pageCurrent = val;
      let params = {
        pageIndex: val,
        pageSize: 10,
        isSuccess: 1,
        businessType: 91,
		beginTime:this.beginTime,
		endTime:this.endTime,
		driverName:this.driverName,
		phone:this.phone,
		status:this.status,
      };
      // console.log("参数", params);
      httpApi.basicSettingApi.queryPageDriverInsure(params).then((res) => {
        console.log(res);
        var date = res.data.data;
        this.data.total = date.total;
        this.resultDate = res.data.data.records;
        this.resultDate = JSON.parse(JSON.stringify(this.resultDate));
      });
    },
    resetPswd(e) {
      let params = {
        did: e.did,
        status: 1,
      };
      httpApi.basicSettingApi.modifyDriverInsureByDid(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("处理成功");
          this.init(this.pageCurrent);
        }
      });
    },
    delBtn(e) {
      let params = {
        did: e.did,
      };
      httpApi.basicSettingApi.deleteDriverInsureByDid(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("处理成功");
          this.init(this.pageCurrent);
        }
      });
    },
  },
  mounted() {
    this.init(this.pageCurrent);
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 127px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;

  .main_head {
    padding: 10px 0;

    .main_head_left {
      font-size: 12px;
      color: #262626;
      display: flex;

      .inputItem {
        display: flex;
        align-items: center;
        margin-right: 15px;

        > .title {
          color: #262626;
          font-size: 12px;
          margin-right: 7px;
        }

        > .inputBox {
          width: 160px;

          .select {
            ::v-deep .el-input__icon {
              line-height: 0;
            }
          }

          ::v-deep .el-input__inner {
            height: 32px;
            font-size: 12px;
          }

          ::v-deep .el-input__inner::placeholder {
            color: #c3c3c3;
            font-size: 12px;
          }
        }
      }
    }

    .main_head_right {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;

      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 12px;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
  .list {
    height: calc(100% - 112px);

    .switchBox {
      display: flex;
      align-items: center;

      .rightText {
        font-size: 12px;
        color: #595959;
      }
    }

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 414px);
      overflow-y: scroll;
    }

    // 表头样式
    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      height: 48px;
      padding: 0;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.dialog {
  // 标题
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    height: 50px;
  }

  ::v-deep .el-dialog__title {
    font-size: 14px;
    color: #303133;
    font-weight: bold;
  }

  //关闭图标
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    font-size: 15px;
  }

  ::v-deep .el-dialog__body {
    padding: 25px 64px 82px;
  }

  //   表格
  ::v-deep .el-form-item__label {
    line-height: 32px;
    font-size: 12px;
    color: #262626;
    padding-top: 4px;
    width: 100%;
  }

  ::v-deep .el-input__inner {
    line-height: 32px;
    height: 32px;
    padding: 0 10px;
  }

  .cancelBtn {
    width: 80px;
    height: 36px;
    border: 1px solid #d9d9d9;
    color: #262626;
    font-size: 12px;
    border-radius: 4px;
    background-color: #fff;
  }

  .submitBtn {
    background-color: #1890ff;
    width: 80px;
    height: 36px;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
  }

  .inputSelect_left {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 4px 0px 0px 4px;
    }
  }

  .inputSelect_right {
    height: 32px;

    ::v-deep .el-input__inner {
      border-radius: 0px 4px 4px 0px;
      border-left: none;
      background-color: #f5f7fa;
      font-size: 12px;
      color: #606266;
    }
  }

  ::v-deep .el-input__icon {
    line-height: 0;
  }

  ::v-deep .el-form-item__content {
    line-height: 0;
  }

  .notes ::v-deep .el-textarea .el-input__count {
    bottom: 15px;
    color: #c0c4cc;
  }
}

.paginationBox {
  width: 100%;
  background-color: #fff;
  display: flex;
  height: 48px;
  align-items: center;

  .pagination {
    margin-left: auto;
  }
}
</style>